import React from "react";
import "@nutui/nutui-react/dist/style.css";
import { Card, Radio, Tag } from "@nutui/nutui-react";
import { useState } from "react";
export default function Item(props) {
  const item = props.item.cart_id;
  const user = props.users;
  // const [selected, setSelected] = useState('');
  // console.log(radioed);

  return (
    <div
      style={{
        display: "flex",
        backgroundColor: "#fff",
        boxSizing: "border-box",
        marginBottom: "10px",
        padding: "10px",
        borderRadius: "10px",
      }}
    >
      <Radio
        checked={props.radios.find((i) => i == item._id) ? true : false}
        onClick={() => {
          props.handleRadioChange(item._id);
        }}
        style={{ marginRight: "10px" }}
      ></Radio>
      <Card
        style={{
          boxSizing: "border-box",
          paddingTop: "15px",
        }}
        src={item.img[0].url}
        title={"商品名称：" + item.title}
        price={item.price}
        tag={
          <span
            style={{
              width: "80px",
              lineHeight: "20px",
              backgroundColor: "#dea32c",
              textAlign: "center",
              color: "white",
              borderRadius: "5px",
              border: "2px solidrgb(255, 191, 0)",
            }}
          >
            校内可配送
          </span>
        }
        description={<p style={{ marginTop: "10px" }}>{item.desc}</p>}
        shopName={
          "校友:" + user.filter((i) => i._id == item.user_id)[0].username
        }
      />
    </div>
  );
}
